<template>
	<view class="view-contain">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module leftIcon="arrow-left" :title="title" />
		<u-tabs lineColor="#409EFF" lineWidth="120rpx" :list="[{ name: '打卡概况' }]" />
		<view class="form-contain">
			<u-form :rules="rules" labelPosition="left" :model="formInfo" labelWidth="auto" ref="addForm">
				<u-form-item label="学习内容" prop="studyContent" borderBottom>
					<u-textarea :disabled="type === 3" v-model="formInfo.studyContent"
						:placeholder="type === 3 ? '' : '请输入学习内容'" />
				</u-form-item>
			</u-form>
		</view>
		<view class="bottom-btn-contain">
			<view style="width: 100%;">
				<u-button v-if="type === 1" type="primary" shape="circle" @click="toAdd">保存打卡</u-button>
				<u-button v-if="type === 2" type="primary" shape="circle" @click="toUpdate">确认修改</u-button>
				<u-row v-if="type === 3" gutter="24">
					<u-col span="6">
						<u-button type="error" shape="circle" @click="toDelete">删除打卡</u-button>
					</u-col>
					<u-col span="6">
						<u-button type="primary" shape="circle" @click="type = 2">编辑打卡</u-button>
					</u-col>
				</u-row>
			</view>
		</view>
		<u-datetime-picker :show="isShowDatetime" ref="datetimePicker" mode="date" v-model="pickerVal"
			@cancel="isShowDatetime = false" @confirm="confirm" />
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		markAdd,
		markEdit,
		markDelete
	} from "@/config/api.js"

	export const addFormRules = {
		'studyContent': {
			required: true,
			message: '请输入学习内容',
			trigger: ['blur', 'change']
		}
	}

	export default {
		data() {
			return {
				rules: addFormRules,
				// 1新增，2编辑，3详情
				type: 1,
				formInfo: {
					studyMarkId: null,
					userId: null,
					userName: null,
					studyMarkDate: null,
					studyCategories: null,
					studySubcategories: null,
					studyContent: null,
					studyExpectedTime: null,
					studyActualTime: null,
					studyMonthTime: null,
					studyAllTime: null,
					dayQuestionsNumber: null,
					monthQuestionsNumber: null,
					questionsNumber: null,
					studySummary: null
				},
				studyCategorie: [],
				isShowDatetime: false,
				pickerVal: Number(new Date().setHours(0, 0, 0, 0)),
				checkboxList: [{
						label: '常识',
						name: 0
					},
					{
						label: '言语',
						name: 1
					},
					{
						label: '数量',
						name: 2
					},
					{
						label: '判断',
						name: 3
					},
					{
						label: '资料',
						name: 4
					},
					{
						label: '申论小题',
						name: 5
					},
					{
						label: '申论作文',
						name: 6
					},
					{
						label: '公专',
						name: 7
					},
					{
						label: '行测套卷',
						name: 9
					},
					{
						label: '申论套卷',
						name: 10
					}
				]
			}
		},
		computed: {
			...mapState(['user']),
			title() {
				switch (this.type) {
					case 1:
						return '新增打卡'
					case 2:
						return '编辑打卡'
					case 3:
						return '打卡详情'
				}
			}
		},
		onLoad(option) {
			if (option.data) {
				const data = JSON.parse(option.data)
				this.formInfo = data
				/* this.studyCategorie = data.studySubcategories.split(',')?.map(item => Number(item)) */
				this.pickerVal = new Date(data.studyMarkDate).getTime()
				this.type = Number(option.type)
			}
		},
		onShow() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		methods: {
			...mapMutations(['setLoginShow', 'emptyUserInfo']),
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {
					return `${value}时`
				}
				if (type === 'minute') {
					return `${value}分`
				}
				if (type === 'second') {
					return `${value}秒`
				}
				return value
			},
			checkboxChange(e) {
				this.formInfo.studySubcategories = e.join(',')
			},
			confirm(e) {
				this.pickerVal = e.value
				this.formInfo.studyMarkDate = uni.$u.timeFormat(new Date(), 'yyyy-mm-dd hh:MM:ss')
				this.isShowDatetime = false
			},
			toAdd() {
				this.$refs.addForm.validate().then(async () => {
					const res = await markAdd({
						...this.formInfo,
						userId: this.user.userId,
						loginName: this.user.loginName
					})
					if (res.code === 200) {
						uni.$u.toast('保存成功')
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 500)
					} else {
						uni.$u.toast(res.msg || '保存失败')
					}
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			toUpdate() {
				this.$refs.addForm.validate().then(async () => {
					const res = await markEdit({
						...this.formInfo,
						userId: this.user.userId,
						loginName: this.user.loginName
					})
					if (res) {
						uni.$u.toast('修改成功')
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 500)
					} else {
						this.emptyUserInfo();
						uni.showModal({
							title: '提示',
							content: '当前登录已无效，请重新登陆。',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									uni.navigateBack({
										delta: 1
									});
								}
							}
						});
					}
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			async toDelete() {
				const res = await markDelete(this.formInfo.studyMarkId)
				if (res) {
					uni.$u.toast('删除成功')
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 500)
				}
			}
		},
		onReady() {
			// onReady 为uni-app支持的生命周期之一
			this.$refs.addForm.setRules(this.rules)
		}
	}
</script>

<style lang="scss" scoped>
	.view-contain {
		position: relative;
		height: 100vh;
		overflow-y: auto;

		/deep/ .u-checkbox-group {
			flex-wrap: wrap;
		}

		.form-contain {
			background-color: #fff;
			border-radius: 32rpx;
			margin: 12rpx 24rpx;
			padding: 24rpx;

			.title {
				font-weight: bold;
				margin-bottom: 16rpx;
			}

			&.bottom-contain {
				margin-bottom: 200rpx;
			}
		}

		.bottom-btn-contain {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 99;
			width: calc(100vw - 48rpx);
			height: 150rpx;
			background-color: #fff;
			padding: 48rpx 24rpx 0;
		}
	}
</style>